<template>
  <div>
    <!-- ---------------------------------------------------------------主功能区--------------------------------------------------------------- ------------- -->
    <el-row class="childRow">
      <el-col :span="20" :offset="2" class="childCol">
        <div class="cardWrap">
          <!-- 卡片 -->
          <el-card class="box-card">
            <!-- 头部 -->
            <div slot="header" class="clearfix">
              <!-- <span>卡片名称</span> -->
              <!-- 头部左侧 -->
              <div class="headLeft">
                <el-button type="primary" icon="el-icon-plus" @click.prevent="createQus">新建</el-button>
                <el-button type="primary" icon="el-icon-refresh-right" @click.prevent="refreshAll">全量刷新</el-button>
              </div>

              <!-- 头部右侧 -->
              <div class="search">
                <!-- 搜索栏 -->
                <el-tooltip class="item" effect="dark" content="搜索框输入内容, 按下回车键进行搜索" placement="top-start">
                  <el-input class="searchBar" v-model="search" placeholder="输入关键字搜索" prefix-icon="el-icon-search"/>
                </el-tooltip>

                <!-- 按钮组 -->
                <el-button-group class="rightBtnGroup">
                  <!-- 下载 -->
                  <el-dropdown @command="fileDownLoad">
                    <el-tooltip class="item" effect="dark" content="文件下载" placement="top-start">
                      <el-button type="info" icon="el-icon-download" style="border-radius: 0;"></el-button>
                    </el-tooltip>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item command="condition">条件下载</el-dropdown-item>
                      <el-dropdown-item command="current">下载当页</el-dropdown-item>
                      <el-dropdown-item command="all">下载全部</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>

                  <!-- 上传 -->
                  <el-tooltip class="item" effect="dark" content="文件上传" placement="top-end">
                    <el-button type="info" @click="handleUpload" icon="el-icon-upload" style="border-radius: 4px 0 0 4px;"></el-button>
                  </el-tooltip>

                  <!-- 高级检索 -->
                  <el-tooltip class="item" effect="dark" content="高级检索" placement="right">
                    <el-popover
                      placement="bottom"
                      width="400"
                      trigger="manual"
                      v-model="isShowPopOver"
                    >
                      <div class="advanceRetrieval">高级检索</div>
                      <div style="padding: 15px 20px;">
                        <el-form label-width="80px" label-position="left" ref="adRetriForm" :model="adRetrieval" :rules="adRetriForm" class="demo-adRetriForm">
                          <!-- <el-form-item label="序号" prop="num"><el-input v-model="adRetrieval.num" placeholder="序号"></el-input></el-form-item> -->
                          <el-form-item label="题干" prop="stem"><el-input v-model="adRetrieval.stem" placeholder="题干"></el-input></el-form-item>
                          <!-- <el-form-item label="解析" prop="analysis"><el-input v-model="adRetrieval.analysis" placeholder="解析"></el-input></el-form-item> -->
                          <!-- <el-form-item label="分数" prop="score"><el-input v-model="adRetrieval.score" placeholder="分数"></el-input></el-form-item> -->
                          <el-form-item label="创建人" prop="creator"><el-input v-model="adRetrieval.creator" placeholder="创建人"></el-input></el-form-item>
                          <el-form-item label="难度" prop="rank">
                            <el-select v-model="adRetrieval.rank" clearable placeholder="请选择难度" class="mySelect">
                              <el-option v-for="(item, index) in adRetrieval_list.rank" :label="item.label" :value="item.value" :key="index"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="题型" prop="type">
                            <el-select v-model="adRetrieval.type" clearable placeholder="请选择题型" class="mySelect">
                              <el-option v-for="(item, index) in adRetrieval_list.type" :label="item.label" :value="item.value" :key="index"></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="学科" prop="class">
                            <el-select v-model="adRetrieval.class" clearable placeholder="请选择学科" class="mySelect">
                              <el-option v-for="(item, index) in adRetrieval_list.class" :label="item.label" :value="item.value" :key="index"></el-option>
                            </el-select>
                          </el-form-item>
                          <!-- <el-form-item label="更新时间" prop="timer">
                            <el-date-picker v-model="adRetrieval.timer" :type="adRetrieval_config.type" :placeholder="adRetrieval_config.placeholder" :align="adRetrieval_config.align" :picker-options="adRetrieval_config.pickerOptions" style="width: 100%;"></el-date-picker>
                          </el-form-item> -->
                        </el-form>
                        <el-button type="default" size="medium" style="float: right; padding: 10px 18px;" @click="adReClose">取消</el-button>
                        <el-button type="primary" size="medium" style="float: right; margin-right: 15px; padding: 10px 18px;" @click="adReSearch">检索</el-button>
                      </div>
                      <el-button slot="reference" type="info" icon="el-icon-arrow-down" style="border-radius: 0 4px 4px 0;" @click="adReClose"></el-button>
                    </el-popover>
                  </el-tooltip>
                </el-button-group>
              </div>
            </div>

            <!-- 内容 -->
            <div class="text item">
              <!-- 表格渲染
                /* 表头字段: num  stem  answer  analysis  score  creator  difficulty  questionType  subject  updateTime */
                /* 列配置项: label, width, columnKey, fixed, sortable, [sortMethod, sortBy, sortOrders], format, align, align */
               -->
              <el-table :data="tableData" :border="true" style="width: calc(90vw);">
                <el-table-column v-for="(item, index) in tableHead" :prop="index" :label="item['label']" :width="item['width']" :fixed="item['fixed']" :key="index">
                </el-table-column>
                <!-- 列操作(单独定义) -->
                <el-table-column label="操作" width="220">
                  <template slot-scope="scope">
                    <el-button type="success" class="operRow_btn" @click.prevent="showDetails(scope)">详情</el-button>
                    <el-button type="info" class="operRow_btn" @click.prevent="showEdit(scope)">编辑</el-button>
                    <el-button type="danger" class="operRow_btn" @click.prevent="delQus(scope)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>

            <!-- 分页 -->
            <el-pagination
              background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageInfo['currentPage']"
              :page-sizes="pageInfo['pageSizes']"
              :page-size="pageInfo['pageSize']"
              layout="total, sizes, next, pager, prev, jumper"
              :total="pageInfo['total']"
              class="pageTools"
            >
            </el-pagination>
          </el-card>
        </div>
      </el-col>
    </el-row>

    <!-- ---------------------------------------------------------------详情-------------------------------------------------------------------------------- -->
    <el-dialog :visible.sync="detailsVisible" title="题目信息" width="50%" :before-close="handleCloseDetail" class="detailDialog">
      <!-- <span>提示信息</span> -->
      <el-divider></el-divider>
      <!-- 题干 -->
      <!-- column 一行显示的descriptions-item的个数，colon 是否显示冒号，布尔值 -->
      <el-descriptions title="题干" :column="1" :colon="false">
          <el-descriptions-item label="">这是一条测试数据</el-descriptions-item>
          <el-descriptions-item label="">这是一条测试数据</el-descriptions-item>
          <el-descriptions-item label="">这是一条测试数据</el-descriptions-item>
          <!-- <el-descriptions-item label="备注">
            <el-tag size="small">学校</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item> -->
      </el-descriptions>
      <!-- 选项 -->
      <el-descriptions title="选项" :column="1" :colon="false">
          <el-descriptions-item label=""><div class="describeItem"></div>这是一条测试数据</el-descriptions-item>
          <el-descriptions-item label=""><div class="describeItem"></div>这是一条测试数据</el-descriptions-item>
          <el-descriptions-item label=""><div class="describeItem"></div>这是一条测试数据</el-descriptions-item>
      </el-descriptions>
      <!-- 答案 -->
      <el-descriptions title="答案" :column="1" :colon="false">
          <el-descriptions-item label=""><div class="describeItem"></div>这是一条测试数据</el-descriptions-item>
          <el-descriptions-item label=""><div class="describeItem"></div>这是一条测试数据</el-descriptions-item>
          <el-descriptions-item label=""><div class="describeItem"></div>这是一条测试数据</el-descriptions-item>
      </el-descriptions>
      <!-- 解析 -->
      <el-descriptions title="解析" :column="1" :colon="false">
          <el-descriptions-item label="">这是一条测试数据</el-descriptions-item>
          <el-descriptions-item label="">这是一条测试数据</el-descriptions-item>
          <el-descriptions-item label="">这是一条测试数据</el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="detailCancel">取 消</el-button>
        <el-button type="primary" @click="detailOk">确 定</el-button>
      </div>
    </el-dialog>

    <!-- ---------------------------------------------------------------编辑-- ----------------------------------------------------------------------------- -->
    <el-dialog :visible.sync="editVisible" title="编辑题目" width="50%" :before-close="handleCloseEdit" class="editDialog">
      <!-- <span>提示信息</span> -->
      <el-divider></el-divider>
      <!-- 题干 -->
      <!-- column 一行显示的descriptions-item的个数，colon 是否显示冒号，布尔值 -->
      <el-descriptions title="题干" :column="1" :colon="false">
          <el-descriptions-item label="">
            <!-- 富文本 -->
            <quill-editor v-model="edit_cur.stem" ref="myQuillEditor" :options="editorOption"></quill-editor>
          </el-descriptions-item>
          <el-descriptions-item label="">
            <div class="describeItem"></div>
            <el-input disabled key="正确" label="正确" value="正确">正确</el-input>
          </el-descriptions-item>
          <el-descriptions-item label="">
            <div class="describeItem"></div>
            <el-input disabled key="错误" label="错误" value="错误">错误</el-input>
          </el-descriptions-item>
      </el-descriptions>

      <!-- 答案 -->
      <el-descriptions title="答案" :column="1" :colon="false">
          <el-descriptions-item label="">
            <div class="describeItem"></div>
            <!-- 下拉 -->
            <el-select v-model="edit_cur.answer" clearable placeholder="请选择" class="mySelect">
              <el-option v-for="(item, index) in editSel_List" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-descriptions-item>
      </el-descriptions>

      <!-- 解析 -->
      <el-descriptions title="解析" :column="1" :colon="false">
          <el-descriptions-item label="">
            <quill-editor v-model="edit_cur.analysis" ref="myQuillEditor" :options="editorOption"></quill-editor>
          </el-descriptions-item>
      </el-descriptions>
      <el-divider></el-divider>

      <div slot="footer" class="dialog-footer">
        <el-button @click="editCancel">取 消</el-button>
        <el-button type="primary" @click="editOk" :loading="isUpdating">{{upt_btnText[Number(isUpdating)]}}</el-button>
      </div>
    </el-dialog>

    <!-- ---------------------------------------------------------------新建-------------------------------------------------------------------------------- -->
    <el-dialog :visible.sync="createVisible" title="创建问题" width="40%" :before-close="handleCloseCreate" class="createDialog" :destroy-on-close="true">
      <!-- <span>提示信息</span> -->
      <el-divider></el-divider>
      <!-- 步骤条 -->
      <div class="stepGo">
        <el-steps :active="active" process-status="wait" finish-status="finish">
          <el-step title="问题内容"></el-step>
          <el-step title="问题分类"></el-step>
          <el-step title="问题选项"></el-step>
        </el-steps>
      </div>
      <!-- 模块一：问题内容 -->
      <div class="qusCT" v-show="qusA">
        <!-- column 一行显示的descriptions-item的个数，colon 是否显示冒号，布尔值 -->
        <el-descriptions title="" :column="1" :colon="true">
          <!-- 题干 -->
          <el-descriptions-item label="题干">
            <quill-editor v-model="createFields.stem" ref="myQuillEditor" :options="editorOption"></quill-editor>
          </el-descriptions-item>
          <!-- 解析 -->
          <el-descriptions-item label="解析">
            <quill-editor v-model="createFields.analysis" ref="myQuillEditor" :options="editorOption"></quill-editor>
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 模块二：问题分类 -->
      <div class="qusClass" v-show="qusB">
        <el-form
          :inline="crtCls_config.inLine"
          :label-position="crtCls_config.labelPosition"
          :label-width="crtCls_config.labelWidth"
          :model="createClass"
          :rules="qusRules"
          ref="qusRuleForm"
          class="demo-ruleForm"
          >
          <el-form-item label="题目" prop="qusName">
            <el-input v-model="createClass.qusName" :readonly="true"></el-input>
          </el-form-item>
          <el-form-item label="题型" prop="qusType">
            <el-select v-model="createClass.qusType" placeholder="请选择题型" clearable class="mySelect" ref="qusType" @change="selectQusType">
              <el-option v-for="(item, index) in qusTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="归类" prop="qusClass">
            <el-select v-model="createClass.qusClass" placeholder="请选择归类" clearable class="mySelect">
              <el-option v-for="(item, index) in qusClassList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="难度" prop="qusRank">
            <el-select v-model="createClass.qusRank" placeholder="请选择难度" clearable class="mySelect">
              <el-option v-for="(item, index) in qusRankList" :key="index" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>

      <!-- 模块三：问题选项 -->
      <div class="qusOpt" v-show="qusC">
        <el-form
          :inline="crtOpt_config.inLine"
          :label-position="crtOpt_config.labelPosition"
          :label-width="crtOpt_config.labelWidth"
          :model="createOpt"
          :rules="crtRules"
          ref="crtRuleForm"
          class="demo-dynamic"
          >
          <!-- 题目 -->
          <el-form-item label="题目" prop="qusName">
            <el-input v-model="createOpt.qusName" :readonly="true"></el-input>
          </el-form-item>

          <!-- 单选 -->
          <el-form-item label="创建选项" prop="qusSingleOpt" v-show="createClass.qusType == 1">
            <el-radio-group v-model="createOpt.qusSingleOpt">
              <el-radio v-for="(item, index) in singleOpts" :label="index" :key="index" class="singleOpt">
                <el-input v-model="singleOpts[index]" clearable placeholder="请输入选项内容"></el-input>
              </el-radio>
            </el-radio-group>
          </el-form-item>

          <!-- 多选 -->
          <el-form-item label="创建选项" prop="qusMultiOpt" v-show="createClass.qusType == 2">
            <el-checkbox-group v-model="createOpt.qusMultiOpt">
              <el-checkbox v-for="(item, index) in multiOpts" :label="index" :key="index" name="qusMultiOpt">
                <el-input style="width: 100%;" v-model="multiOpts[index]" clearable> placeholder="请输入选项内容"</el-input>
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- 判断 -->
          <el-form-item label="创建选项" prop="qusJustOpt" v-show="createClass.qusType == 3">
            <el-radio-group v-model="createOpt.qusJustOpt">
              <el-radio v-for="(item, index) in justOpts" :label="item" :key="index"></el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <el-button @click="createBack" v-show="isShowBack" style="float: left;">上 一 步</el-button>
        <el-button @click="createCancel">取 消</el-button>
        <el-button type="primary" @click="createOk" :loading="isCreating">{{crt_btnText[Number(isCreating)]}}</el-button>
      </div>
    </el-dialog>

    <!-- -------------------------------------------------------------文件上传------------------------------------------------------------------------------ -->
    <el-dialog title="文件上传" :visible.sync="isShowUpload" align="center" width="600px" :before-close="closeUploadModal" class="fileUpload">
      <!-- 自定义上传过程 :http-request="uploadOpt['httpRequest']" -->
      <el-upload
        :action="uploadOpt['action']"
        :accept="uploadOpt['accept']"
        :auto-upload="uploadOpt['autoUpload']"
        :before-remove="uploadOpt['beforeRemove']"
        :before-upload="uploadOpt['beforeUpload']"
        :class="uploadOpt['upload-demo']"
        :drag="uploadOpt['drag']"
        :file-list="uploadOpt['fileList']"
        :multiple="uploadOpt['multiple']"
        :on-change="uploadOpt['onChange']"
        :on-preview="uploadOpt['onPreview']"
        :on-exceed="uploadOpt['onExceed']"
        :on-progress="uploadOpt['onProgress']"
        :on-remove="uploadOpt['onRemove']"
        :on-success="uploadOpt['onSuccess']"
        :on-error="uploadOpt['onError']"
        ref="upload"
        :limit="uploadOpt['limit']"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传Excel文件</div>
      </el-upload>
      <el-row>
        <el-col :span="12"><el-button type="primary" @click="uploadFile">上传文件<i class="el-icon-upload el-icon--right"></i></el-button></el-col>
        <el-col :span="12"><el-button type="info" @click="cancelUpload">取消上传</el-button></el-col>
      </el-row>
    </el-dialog>

  </div>
</template>

<script>
// 导入封装的富文本插件
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'
// 表头文件
import { tecQusManage } from '../../../utils/table'
// 测试数据
import testData from '../../../testData/qusTable.json'

export default {
  name: 'Qs_List',
  /* --------------------------------------------------------------------------------------------data数据----------------------------------------------------------------------------------------------------- */
  data () {
    return {
      // 优先注册导入变量
      tableHead: tecQusManage.tableHead, // 表头字段
      tableData: testData, // 测试数据

      // el-card
      // 新建模态框
      createVisible: false,
      active: 1,
      crt_btnText: ['下 一 步', '完成'],
      isCreating: false,
      isSubmitCRT: false, // 是否提交问题创建
      createFields: { // 1-问题内容
        stem: '',
        analysis: ''
      },
      createClass: { // 2. 问题分类
        qusName: '', // 题目
        qusType: '', // 题型
        qusClass: '', // 归类
        qusRank: '' // 难度
      },
      qusTypeList: [ // 题型列表
        { label: '单选', value: 1 }, { label: '多选', value: 2 }, { label: '判断', value: 3 }
        // {label: "单选", value: "1"}, {label: "多选", value: "2"}, {label: "判断", value: "3"},
      ],
      qusClassList: [ // 归类列表
        { label: 'SQL', value: 'SQL' }, { label: 'JAVA基础', value: 'JAVA基础' }, { label: 'Java进阶', value: 'Java进阶' }, { label: '框架', value: '框架' }, { label: 'Linux', value: 'Linux' }
        // {label: "SQL", value: "1"}, {label: "JAVA基础", value: "2"}, {label: "Java进阶", value: "3"}, {label: "框架", value: "4"}, {label: "Linux", value: "5"}
      ],
      qusRankList: [ // 难度列表
        { label: '难', value: '难' }, { label: '中', value: '中' }, { label: '易', value: '易' }
        // {label: "难", value: "1"}, {label: "中", value: "2"},{label: "易", value: "3"}
      ],
      crtCls_config: {
        inLine: false,
        labelPosition: 'right',
        labelWidth: '60px'
      },
      qusRules: { // rules
        qusType: [
          { required: true, message: '请选择题型', trigger: 'change' /* 触发方式 */ }
        ],
        qusClass: [
          { required: true, message: '请选择归类', trigger: 'change' /* 触发方式 */ }
        ],
        qusRank: [
          { required: true, message: '请选择难度', trigger: 'change' /* 触发方式 */ }
        ]
      },
      isShowBack: false, // 是否显示上一步按钮
      qusA: true, // 问题内容（是否显示）
      qusB: false, // 问题分类（是否显示）
      qusC: false, // 问题选项（是否显示）
      isNotEmpty1: false,
      isNotEmpty2: false,
      isNotEmpty3: false,

      createOpt: { // 3. 问题选项
        qusName: '', // 题目
        qusSingleOpt: '', // 单选
        qusMultiOpt: [], // 多选
        qusJustOpt: '' // 判断
      },
      singleOpts: { // 单选input内容
        A: '',
        B: '',
        C: '',
        D: ''
      },
      multiOpts: { // 多选input内容
        A: '',
        B: '',
        C: '',
        D: ''
      },
      justOpts: { A: '正确', B: '错误' }, // 判断的input内容（已写死）
      crtOpt_config: {
        inLine: false,
        labelPosition: 'right',
        labelWidth: '80px'
      },
      crtRules: { // rules
        qusSingleOpt: [{ required: false, message: '请设置单选答案', trigger: 'change' /* 触发方式 */ }],
        qusMultiOpt: [{ type: 'array', required: false, message: '请设置多选答案，最少一个', trigger: 'change' /* 触发方式 */ }],
        qusJustOpt: [{ required: false, message: '请设置判断答案', trigger: 'change' /* 触发方式 */ }]
      },
      map_ttr: { // 题型与校验规则的映射集合
        1: 'qusSingleOpt',
        2: 'qusMultiOpt',
        3: 'qusJustOpt'
      },

      // 关联搜索栏
      search: '',

      // 上传
      // 上传的配置项
      isShowUpload: false, // Dialog显隐
      uploadOpt: {
        action: '/question/upload', // 文件上传地址
        accept: '.xlsx', // 上传文件的类型校验
        autoUpload: false, // 是否在选取文件后立即进行上传
        class: 'upload-demo',
        drag: true,
        fileList: [], // 文件上传列表
        limit: 4, // 最大允许上传个数
        multiple: true, // 是否文件多选上传
        beforeRemove: this.beforeRemove,
        beforeUpload: this.beforeUpload,
        onChange: this.onChange,
        onExceed: this.onExceed,
        onPreview: this.onPreview,
        onRemove: this.onRemove, // 文件列表移除文件时的钩子
        onProgress: this.onProgress, // 文件上传时的钩子
        onSuccess: this.onSuccess,
        onError: this.onError
      },

      // 高级检索
      isShowPopOver: false,
      // 所有字段
      adRetrieval: {
        // num: "",
        stem: '',
        // analysis: "",
        // score: "",
        creator: '',
        rank: '',
        type: '',
        class: ''
        // timer: ""
      },
      // 下拉列表
      adRetrieval_list: {
        rank: [
          { label: '难', value: '1' }, { label: '中', value: '2' }, { label: '易', value: '3' }
        ],
        type: [
          { label: '单选', value: '1' }, { label: '多选', value: '2' }, { label: '判断', value: '3' }
        ],
        class: [
          { label: 'Java', value: '1' }, { label: 'HTML', value: '2' }, { label: 'JS', value: '3' }
        ]
      },
      // 配置项
      /* adRetrieval_config: {
        type: "datetime",
        align: "right",
        placeholder: "请选择更新时间",
        pickerOptions: {
          shortcuts: [{
            text: "今天",
            onClick(picker){
              const date = new Date();
              picker.$emit("pick", date);
            }
          },{
            text: "昨天",
            onClick(picker){
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },{
            text: "两天前",
            onClick(picker){
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 2);
              picker.$emit("pick", date);
            }
          },{
            text: "三天前",
            onClick(picker){
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", date);
            }
          },{
            text: "一周前",
            onClick(picker){
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }]
        },
      }, */
      // 表单校验
      adRetriForm: {
        // num: [{required: false, message: "请输入题目序号", trigger: ["focus", "blur"]}],
        stem: [{ required: false, message: '请输入题目', trigger: ['focus', 'blur'] }],
        // analysis: [{required: false, message: "请输入题目解析", trigger: ["focus", "blur"]}],
        // score: [{required: false, message: "请输入分数", trigger: ["focus", "blur"]}],
        creator: [{ required: false, message: '请输入创建人', trigger: ['focus', 'blur'] }],
        rank: [{ required: false, message: '请选择题目难度', trigger: ['change'] }],
        type: [{ required: false, message: '请选择题目类型', trigger: ['change'] }],
        class: [{ required: false, message: '请选择学科', trigger: ['change'] }]
        // timer: [{required: false, message: "请选择更新时间", trigger: ["change", "blur"]}]
      },

      // 详情模态框
      detailsVisible: false,
      // 编辑模态框
      editVisible: false,
      isUpdating: false,
      upt_btnText: ['更 新', '更新中...'],
      editSel_List: [{
        value: '正确',
        label: '正确'
      }, {
        value: '错误',
        label: '错误'
      }],
      edit_cur: { // 当前数据
        stem: '',
        answer: '',
        analysis: ''
      },
      edit_backup: { // 数据备份（编辑，提交比较）
        stem: '',
        answer: '',
        analysis: ''
      },
      timer1: null,
      timer2: null,

      // UE
      content: '',
      editorOption: {},

      // 分页
      pageInfo: {
        currentPage: 1, // 当前页的页码
        pageSize: 10, // 每页显示的数据条数
        pageSizes: [10, 20, 40, 60, 80, 100], // 每页数据条数选择器配置
        total: 1000 // 数据总数
      }
    }
  },
  /* --------------------------------------------------------------------------------------------生命周期----------------------------------------------------------------------------------------------------- */
  created () {
    // request ( Vue组件创建完毕开始请求数据 )
    this.pageRequest()
  },
  mounted () {
    this.curLocation = this.$route.meta.title
  },
  /* --------------------------------------------------------------------------------------------方法定义----------------------------------------------------------------------------------------------------- */
  methods: {
    // 新建显示
    createQus () {
      this.createVisible = true
    },
    // 新建-第二步选择题型
    selectQusType (value) {
      // 设置规则
      switch (value) {
        case 1:
          this.crtRules.qusSingleOpt[0].required = true
          break
        case 2:
          this.crtRules.qusMultiOpt[0].required = true
          break
        case 3:
          this.crtRules.qusJustOpt[0].required = true
          break
      }
    },
    // 清空新建过程的所有字段
    handleClearFields (sign = '', newT = '', oldT = '') {
      if (sign == 'fail') { // 提交后端，创建失败
        this.isCreating = false
      } else if (sign == 'goBack') { // 点击上一步清空指定字段
        for (var key1 in this.crtRules) { // 校验规则变化
          if (key1 == this.map_ttr[newT]) {
            this.crtRules[key1][0].required = true
          } else {
            this.crtRules[key1][0].required = false
          }
        }
        for (var key2 in this.singleOpts) { // 单选的选项内容
          this.singleOpts[key2] = ''
        }
        for (var key3 in this.multiOpts) { // 多选的选项内容
          this.multiOpts[key3] = ''
        }
        this.createOpt.qusSingleOpt = '' // 单选正确答案
        this.createOpt.qusMultiOpt = [] // 多选正确答案
        this.createOpt.qusJustOpt = '' // 判断正确答案
      } else { // 创建成功或点击取消或x（清空所有字段，所有状态恢复默认）
        this.createVisible = false
        this.isCreating = false
        this.isShowBack = false
        this.active = 1
        this.qusA = true
        this.qusB = false
        this.qusC = false
        this.isNotEmpty1 = false
        this.isNotEmpty2 = false
        this.isNotEmpty3 = false
        this.createOpt.qusSingleOpt = '' // 单选正确答案
        this.createOpt.qusMultiOpt = [] // 多选正确答案
        this.createOpt.qusJustOpt = '' // 判断正确答案
        for (var key1 in this.createFields) { // 清空问题内容
          this.createFields[key1] = ''
        }
        for (var key2 in this.createClass) { // 清空问题分类
          this.createClass[key2] = ''
        }
        for (var key3 in this.crtRules) { // 校验规则
          this.crtRules[key3][0].required = false
        }
        for (const key4 in this.singleOpts) { // 单选的选项内容
          this.singleOpts[key4] = ''
        }
        for (const key5 in this.multiOpts) { // 多选的选项内容
          this.multiOpts[key5] = ''
        }
      }
    },
    // 新建关闭（公共方法）
    closeCreateCommon (done) {
      const config = [
        '确定退出新建题目吗?',
        '退出新建',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }
      ]
      this.$confirm(...config)
        .then(() => {
          done ? done() : null
          // 重置状态
          this.handleClearFields() // 清空所有步骤的字段
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '取消关闭新建题目窗口',
            showClose: true
          })
        })
    },
    // 新建关闭
    handleCloseCreate (done) {
      this.closeCreateCommon(done)
    },
    // 新建取消
    createCancel () {
      this.closeCreateCommon()
    },
    // 新建提交（全部）
    createOk () {
      const sub_data = {} // 步骤一二的字段收集器
      this.qusA = true
      this.qusB = false
      this.qusC = false

      if (this.active <= 3) {
        // 收集字段，验证是否符合规范
        /* 步骤一 */
        if (this.active == 1) {
          if ((this.createFields.stem && this.createFields.analysis) == '') {
            this.$message({
              type: 'warning',
              message: '请确保所有字段已填写完毕',
              showClose: true
            })
            return false
          } else {
            if (/^<p>.*<\/p>$/g.test(this.createFields.stem)) {
              sub_data.stem = this.createFields.stem.slice(3, this.createFields.stem.length - 4).trim()
            } else {
              sub_data.stem = this.createFields.stem.trim()
            }
            if (/^<p>.*<\/p>$/g.test(this.createFields.analysis)) {
              sub_data.analysis = this.createFields.analysis.slice(3, this.createFields.analysis.length - 4).trim()
            } else {
              sub_data.analysis = this.createFields.analysis.trim()
            }
            // 状态变更
            this.createClass.qusName = sub_data.stem
            this.createOpt.qusName = sub_data.stem
            this.isNotEmpty1 = true
            this.active++
          }
        }

        /* 步骤二 */
        if (this.isNotEmpty1 && this.active == 2) {
          this.qusA = false
          this.qusB = true
          this.qusC = false
          this.isShowBack = true // 显示上一步按钮
          let step2 = true// 标识本步骤的所有字段是否填写完毕
          for (var key in this.createClass) { // 检查字段
            if (this.createClass[key] == '') {
              step2 = false
              break
            }
          }
          if (step2) { // 字段均不为空
            this.$refs.qusRuleForm.validate((valid) => {
              if (valid) { // 检验通过
                // 状态变更
                this.isNotEmpty2 = true
                this.active++
              } else {
                this.$message({
                  type: 'warning',
                  message: '请确保所有字段已填写完毕',
                  showClose: true
                })
                return false
              }
            })
          } else {
            this.$message({
              type: 'warning',
              message: '请填写所有字段',
              showClose: true
            })
            return false
          }
        }

        /* 步骤三 */
        if (this.isNotEmpty2 && this.active == 3) {
          this.qusA = false
          this.qusB = false
          this.qusC = true
          this.isShowBack = true // 显示上一步按钮
          let step3 = true // 标识本步骤的所有字段是否填写完毕
          // 1.“选项内容”为空校验
          switch (this.createClass.qusType) { // 单选、多选、判断题显示（判断题选项是写死的，交由form表单校验即可，无需在此处判断）
            case 1:
              // 单选集合（input内容）
              for (var key in this.singleOpts) {
                if (this.singleOpts[key].trim() == '') {
                  step3 = false
                  break
                }
              }
              break
            case 2:
              // 多选集合（input内容）
              for (var key in this.multiOpts) {
                if (this.multiOpts[key].trim() == '') {
                  step3 = false
                  break
                }
              }
              break
          }
          // 2.“答案选择”为空校验
          if (step3) {
            this.$refs.crtRuleForm.validate((valid) => {
              if (valid) { // 检验通过
                // 状态变更
                this.isNotEmpty3 = true
              } else {
                this.$message({
                  type: 'warning',
                  message: '请选择题目的答案选项',
                  showClose: true
                })
                return false
              }
            })
          } else {
            this.$message({
              type: 'warning',
              message: '请填写题目的所有选项内容',
              showClose: true
            })
            return false
          }
        }
      }

      if (this.isNotEmpty1 && this.isNotEmpty2 && this.isNotEmpty3) {
        /* 调取新增接口，提交处理 */
        this.$confirm('确认要提交数据吗', '提交', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'info' })
          .then(() => {
          // 非空提交
            const sub_qusAll = this.collect_qusFields() // 新建问题的所有字段
            console.log('所有新建字段: ', sub_qusAll)
            this.isCreating = true // 创建中...
            // 调取新增接口
            // ...
            this.$axios({
              method: 'post',
              url: 'http://192.168.43.182:8080/api/question/addOne',
              data: sub_qusAll
            }).then((res) => {
              console.log(res)
              // 根据后端返回的状态码判断是否创建成功，给予相应提示和页面效果
              // if(创建成功){
              /* 创建成功 */
              this.$message({ type: 'success', message: '创建成功' })
            // }
            // if(创建失败){
            //   /* 创建失败 */
            //   this.$message({type: "success", message: "创建失败"})
            // }
            }).catch((error) => {
              console.log(error)
              alert(error)
            /* 请求失败 */
            // setTimeout(()=>{ // 模拟调取接口
            //   this.handleClearFields("fail"); // 所有状态恢复默认
            // }, 2000);
            }).finally(() => {
              this.handleClearFields('success') // 所有状态恢复默认
            })

          // // 模拟调取接口
          // /* 创建成功 */
          // this.isCreating = true;
          // setTimeout(()=>{
          //   this.handleClearFields("success"); // 所有状态恢复默认
          // }, 2000);
          // /* 创建失败 */
          // // this.isCreating = true;
          // // setTimeout(()=>{ // 模拟调取接口
          // //   this.handleClearFields("fail"); // 所有状态恢复默认
          // // }, 2000);
          })
          .catch(() => { // 注意尽量不要在catch中使用message，否则.then中无法使用axios
            return false
          })
      }
    },
    // 返回上一步
    createBack () {
      switch (this.active) {
        case 3:
          this.active--
          this.qusA = false
          this.qusB = true
          this.qusC = false
          break
        case 2:
          this.active--
          this.isShowBack = false
          this.qusA = true
          this.qusB = false
          this.qusC = false
          break
      }
    },
    // 新建-字段收集
    collect_qusFields () {
      const sub_qusCOT = {} // 步骤一的所有字段收集（问题内容）- 题干、解析
      const sub_qusCLS = {} // 步骤二的所有字段收集（问题分类）- 题型、归类、难度
      const sub_qusOPT = {} // 步骤三的所有字段收集（问题选项）- 选项、答案
      // 问题内容
      for (var key in this.createFields) {
        if (/^<p>.*<\/p>$/g.test(this.createFields[key])) {
          sub_qusCOT[key] = this.createFields[key].slice(3, this.createFields[key].length - 4).trim()
        }
      }
      // 问题分类
      for (var key in this.createClass) {
        if (key != 'qusName') {
          sub_qusCLS[key] = typeof this.createClass[key] === 'string' ? this.createClass[key].trim() : this.createClass[key]
        }
      }
      // 问题选项
      for (var key in this.createOpt) {
        if (key != 'qusName') { // 设置的答案选项
          sub_qusOPT[key] = typeof this.createOpt[key] === 'string' ? this.createOpt[key].trim() : this.createOpt[key]
        }
      }
      // 选项内容
      sub_qusOPT.singleOpts = this.singleOpts
      sub_qusOPT.multiOpts = this.multiOpts
      sub_qusOPT.justOpts = this.justOpts
      const allFields = Object.assign({}, sub_qusCOT, sub_qusCLS, sub_qusOPT) // 注意三个对象的键名Key不要重复, 题干（题目）除外。
      debugger
      return allFields

      // 对接口
      // var lastFileds = {};
      // lastFileds["questionName"] = allFields["stem"];
      // lastFileds["Description"] = allFields["analysis"];
      // lastFileds["questionTypeName"] = allFields["qusType"];
      // lastFileds["questionCategoryName"] = allFields["qusClass"];
      // lastFileds["questionLevelDescription"] = allFields["qusRank"];
      // lastFileds["questionOptionContent"] = [allFields["crtOptList"][0]["value"], allFields["crtOptList"][1]["value"]]; // 0 1
      // return lastFileds;
    },

    // 全量刷新
    refreshAll () {
      window.location.reload()
      // window.history.go(0);
      // window.location.replace("http://localhost:8080/#/question");
    },

    // 文件上传
    handleUpload () { // 上传弹框显隐控制
      this.isShowUpload = true
    },
    uploadFile () {
      if (this.uploadOpt.fileList.length == 0) {
        this.$message({
          type: 'warning',
          message: '未选择任何文件',
          showClose: true
        })
      } else {
        this.$refs.upload.submit() // 手动提交
      }
    },
    cancelUpload () { // 取消上传
      this.ClearFileList()
    },
    closeUploadModal () {
      this.ClearFileList()
    },
    ClearFileList () {
      this.uploadOpt.fileList = []
      if (this.isShowUpload) {
        this.isShowUpload = false
      }
    },
    // 文件移除之前的操作
    beforeRemove: function (file, fileList) {
      return this.$confirm(`确定要移除 ${file.name} 文件吗？`)
    },
    // 文件上传之前的操作
    beforeUpload: function (file) {
      console.log('文件上传之前')
      // if(file.size){
      //   // ...
      // } else {
      //   return false; // 返回false 或 返回Promise且被reject，则停止上传。
      // }
    },
    // 文件状态改变时的钩子，添加文件、上传成功、上传失败时都会被调用 function(file, fileList)
    onChange: function (file, fileList) {
      console.log('文件状态改变')
    },
    // 文件超出个数限制时的钩子 function(files, fileList)
    onExceed: function (files, fileList) {
      // 阻止上传
      this.$message({ type: 'error', message: `上传失败，文件超出最大上传个数量：${this.uploadOpt.limit}`, showClose: true })
    },
    // 点击文件列表中已上传的文件时的钩子	function(file)
    onPreview: function (file) {
      console.log(`您点击了已上传的文件 ${file.name}`)
    },
    // 文件移除时的钩子 function(file, fileList)
    onRemove: function (file, fileList) {
      return this.$message({ type: 'success', message: `成功移除 ${file.name} 文件`, showClose: true })
    },
    // 文件上传时的钩子 function(event, file, fileList)
    onProgress: function (event, file, fileList) {
      // console.log(`${file.name}`);
      // 可以显示文件上传的实时进度
    },
    // 文件上传成功时的钩子 function(response, file, fileList)
    onSuccess: function (response, file, fileList) {
      console.log(response)
      console.log(file)
      // 文件上传成功，根据后端接口返回判断是否上传成功
      if (response != '') {
        this.$message({
          type: 'error',
          message: '上传失败',
          showClose: true
        })
        // 下载文件
        // const link = document.createElement("a");
        // let blob = new Blob([response], { type: "application/msexcel" }); // 注意文件的类型type
        // link.style.display = "none";
        // const url = URL.createObjectURL(blob);
        // link.href = url;
        // link.download = "MyFile.xlsx"; // 下载的文件名称
        // document.body.appendChild(link);
        // link.click();
        // document.body.removeChild(link);
        // URL.revokeObjectURL(url);
      } else {
        this.$message({
          type: 'success',
          message: '上传成功',
          showClose: true
        })
      }
    },
    // 文件上传失败时的钩子 function(err, file, fileList)
    onError: function (err, file, fileList) {
      // console.log(err);
      // console.log(file);
      this.$message({
        type: 'error',
        message: `${file.name} 文件上传失败，结果：${file.status}`,
        showClose: true
      })
    },

    // 文件下载
    fileDownLoad (command) {
      switch (command) {
        case 'condition':
          alert('条件下载')
          break
        case 'current':// 下载当页
          var allFields = {}// 字段收集
          allFields.currentPage = this.pageInfo.currentPage // 当前页码
          allFields.pageSize = this.pageInfo.pageSize // 当前页条数
          alert(`allFields: ${allFields}`)
          console.log(allFields)
          // 请求下载接口
          // ...
          this.$api.qsList.exportFile({ method: 'get', url: 'question/download', data: allFields, fileName: 'MyExcel.xlsx', responseType: 'blob' })
          break
        case 'all':// 下载全部
          var allFields = { // 字段收集
            totalCount: Number(this.pageInfo.total) // 总条数
          }
          alert(`totalCount: ${this.pageInfo.total}`)
          console.log(allFields)
          // 请求下载接口
          // ...
          this.$api.qsList.exportFile({ method: 'get', url: 'question/download', data: allFields, fileName: 'MyExcel.xlsx', responseType: 'blob' })
          break
      }
    },

    // 高级检索
    // 关闭（公共方法）
    clearAdReFields () {
      this.isShowPopOver = !this.isShowPopOver // 隐藏
      for (const key in this.adRetrieval) { // 清空所有字段
        this.adRetrieval[key] = ''
      }
    },
    // 收集字段（公共方法）
    collect_adReFeilds () {
      // ...
      const resFields = this.$utils.deepCopy(this.adRetrieval) // 此处调用了深拷贝工具函数，如果后端字段不一致，则手动调整后返回所有字段对象。
      return resFields
    },
    // 点击按钮或点击取消
    adReClose () {
      if (this.isShowPopOver == false) {
        this.isShowPopOver = !this.isShowPopOver
      } else {
        const config = ['确定退出高级检索吗？', '关闭提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'info' }]
        this.$confirm(...config)
          .then(() => {
            this.clearAdReFields()
          })
          .catch(() => {
            this.isShowPopOver = true
          })
      }
    },
    // 点击检索
    adReSearch () {
      // 收集字段
      const allFields = this.collect_adReFeilds()
      console.log(allFields)
      // 请求
      // ...
      // 请求成功
      // 检索成功
      // this.clearAdReFields();
      // 检索失败
      // this.clearAdReFields();
      // 请求失败
      this.clearAdReFields()
    },

    // 详情弹窗
    showDetails (scp) {
      const index = scp.$index // 当前行索引
      const curData = scp.row // 当前行数据
      // 显示 详情模态框
      this.detailsVisible = true
      // 请求接口，回显数据
      // ...
    },
    // 详情关闭（公共方法）
    closeDetailCommon (done) {
      const config = [
        '确定要关闭题目详情吗?',
        '退出详情',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }
      ]
      this.$confirm(...config)
        .then(() => {
          done ? done() : null
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '取消关闭详情窗口',
            showClose: true
          })
        })
    },
    handleCloseDetail (done) {
      this.closeDetailCommon(done)
    },
    detailCancel () {
      this.detailsVisible = false
    },
    detailOk () {
      this.detailsVisible = false
    },

    // 编辑弹窗
    showEdit (scp) { // 作用：显示编辑模态框、回显数据、数据备份（提交更新时比较）
      const { $index, row } = scp
      // 1-显示编辑模态框
      this.editVisible = true
      // 2-备份数据-回显数据
      for (const key in this.edit_cur) {
        this.edit_cur[key] = this.$utils.deepCopy(row)[key]
        this.edit_backup[key] = this.$utils.deepCopy(row)[key]
      }
    },
    // 公共方法 (关闭编辑)
    closeEditCommon (done) {
      const config = [
        '确定要关闭编辑题目吗?',
        '退出编辑',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }
      ]
      this.$confirm(...config)
        .then(() => {
          done ? done() : null
          // 重置状态
          this.editVisible = false
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '取消关闭编辑窗口',
            showClose: true
          })
        })
    },
    handleCloseEdit (done) {
      this.closeEditCommon(done)
    },
    editCancel () {
      this.closeEditCommon()
    },
    editOk () { // 更新数据
      const sub_data = {}
      // 判断是否包含<p>标签，进行剔除
      sub_data.answer = this.edit_cur.answer
      if (/^<p>.*<\/p>$/g.test(this.edit_cur.stem)) {
        sub_data.stem = this.edit_cur.stem.slice(3, this.edit_cur.stem.length - 4).trim()
      } else {
        sub_data.stem = this.edit_cur.stem.trim()
      }
      if (/^<p>.*<\/p>$/g.test(this.edit_cur.analysis)) {
        sub_data.analysis = this.edit_cur.analysis.slice(3, this.edit_cur.analysis.length - 4).trim()
      } else {
        sub_data.analysis = this.edit_cur.analysis.trim()
      }
      let isChanged = false
      isChanged = this.$utils.isChanged(this.edit_backup, sub_data)
      alert(`用户是否修改了数据：${isChanged}`)
      if (isChanged) { // 如果更改了，提交更新
        // 请求接口，提交更新
        // ...

        // 更新成功，关闭窗口
        this.isUpdating = true
        this.timer1 = setTimeout(() => {
          this.editVisible = false // 弹框隐藏
          this.isUpdating = false // 按钮恢复默认状态
          clearTimeout(this.timer1)
          this.timer1 = null
        }, 2000)

        // 更新失败，不关闭窗口
        // this.isUpdating = true;
        // this.timer2 = setTimeout(()=>{
        //   // this.editVisible = true; // 弹框显示
        //   this.isUpdating = false; // 按钮恢复默认状态
        //   this.$message({
        //     type: "error",
        //     message: "数据更新失败",
        //     showClose: true
        //   })
        //   clearTimeout(this.timer2);
        //   this.timer2 = null;
        // },2000);
      } else {
        this.$message({
          type: 'error',
          message: '未修改数据，更新失败',
          showClose: true
        })
      }
    },

    // 删除问题列表
    delQus (scp) {
      // var index = scp.$index; // 当前行索引
      const curIndex = scp.row.num// 此条数据id
      const curData = scp.row // 当前行数据
      const config = [`确认要删除 序号为：${curIndex} 的问题吗？`, '删除提示', { confirmButtonText: '确定', cancelButtonText: '取消' }]
      this.$confirm(...config)
        .then(() => {
        // 请求接口
        // ...
        // 删除成功
        // this.$message({
        //   type: "success",
        //   message: "删除成功",
        //   showClose: true
        // })
        // 删除失败
        // this.$message({
        //   type: "error",
        //   message: "删除失败",
        //   showClose: true
        // })
          this.tableData = this.tableData.filter((item, index) => {
            return item.num != (curIndex)
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除',
            showClose: true
          })
        })
    },

    // 分页
    // 分页（公共方法封装）
    pageCommon (res) {
      if (res.data.code == 200 && res.status == 200) {
        const resp = res
        const { data } = resp.data
        const { list, nextPage, pages, pageSize, pageNum, total } = data
        // 分页配置数据初始化
        // this.pageInfo.pageNum = pageNum; // 页码
        this.pageInfo.total = total // 总条数
        // console.log(list);
        // 表格数据
        this.tableData = list.map((item, index) => { // 渲染（处理空值字段、浮点数、日期字段，渲染和回显使用）
          for (const key in this.dialogHead) {
            item[key] = item[key] == null ? '' : item[key]
          }
          item.empLateNum = item.empLateNum == '' ? '' : parseInt(Number(item.empLateNum))
          item.empCreateTime = item.empCreateTime == '' ? '' : this.$utils.getDate(item.empCreateTime, false)
          item.empUpdateTime = item.empUpdateTime == '' ? '' : this.$utils.getDate(item.empUpdateTime, false)
          delete item.page // 删除 page 字段
          delete item.pageSize // 删除 pageSize 字段
          delete item.empTitle // 删除 empTitle 字段
          return item
        })
      }
    },
    // 分页请求
    pageRequest () {
      const params = { page: this.pageInfo.currentPage, pageSize: this.pageInfo.pageSize } // 携带 “每页显示的数据条数” 和 “页码” 进行请求
      /* this.$api.ygKQ.getAllEmpAttend(params)
      .then((res)=>{
        // console.log(res);
        this.pageCommon(res); // 调用公共分页处理方法
      }).catch((error)=>{
        console.log(error);
        this.$message({
          type: "error",
          message: `分页请求失败，请稍后重试 ${error.code}`,
          showClose: true
        })
      }) */
    },
    // 改变分页条数
    handleSizeChange (val) { // 改变每页显示的条数
      console.log(`每页 ${val} 条`)
      this.pageInfo.pageSize = val
      alert(`当前页要显示 ${this.pageInfo.pageSize} 条数据，当前页码：${this.pageInfo.currentPage}`)
      // 请求接口数据（携带 当前页要显示的条数、当前页码）
      // ...
    },
    // 点击分页跳转
    handleCurrentChange (val) { // 点击分页跳转（前往后面的分页）
      console.log(`当前页: ${val}被改变`)
      this.pageInfo.currentPage = val
      alert(`当前页要显示 ${this.pageInfo.pageSize} 条数据，当前页码：${this.pageInfo.currentPage}`)
      // 请求接口数据（携带 当前页要显示的条数、当前页码）
      // ...
    }

  },
  /* --------------------------------------------------------------------------------------------组件注册----------------------------------------------------------------------------------------------------- */
  components: {
    quillEditor // 富文本组件
  },
  /* -------------------------------------------------------------------------------------------- wacth ----------------------------------------------------------------------------------------------------- */
  watch: {
    'createClass.qusType': {
      handler (newVal, oldVal) {
        // 初始化规则、选项及内容（点击上一步回去修改题型，重新设置题型，所有规则恢复默认）
        if (newVal != oldVal && oldVal != '') { // newVal为空的情况不考虑，新建第二步会自动校验
          this.handleClearFields('goBack', newVal, oldVal)
        }
      }
      // deep: true,
      // immediate: true
    }
  }
}
</script>

<style lang="less" scoped>
.childRow{
  // height: calc(84vh);
  padding: 2vh 0;
  // background: #eeeeee;
  .childCol{
    height: 100%;
    background: #ffffff;
    .cardWrap{
      background: #ffffff;
      .box-card {
        // width: 480px;
        .headLeft{
          float: left;
        }
        .search{
          float: right;
          .searchBar{
            width: 180px;
          }
          .rightBtnGroup{
            margin-left: 5px;
          }
        }
      }
    }
  }
}

/* clearfix */
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
/* text item */
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
/* 表格的操作列button类 */
.operRow_btn{
  padding: 8px 14px;
}

/* 分页 */
.pageTools{
  // text-align: right;
  margin: 10px 0;
}
/deep/ .el-pagination__total{
  float: left;
}
/deep/ .el-pagination__sizes{
  float: left;
}
/deep/ .btn-prev{
  float: right;
}
/deep/  .el-pager{
  float: right;
}
/deep/ .btn-next{
  float: right;
}
/deep/ .el-pagination__jump{
  float: right;
}

/* 新建、详情、编辑弹窗 */
.createDialog, .detailDialog, .editDialog{
  padding: 0 20px !important;
  /* el-descriptions-item */
  .describeItem{
    margin-right: 15px;
    display: inline-block;
    width: 8px;
    height: 8px;
    background: black;
    border-radius: 50%;
    /* font-size: 50px; */
  }
}
.stepGo {
  width: 100%;
  margin-bottom: 20px;
}
/* 单选 */
.singleOpt{
  width: 96%;
  margin: 5px 0;
}
/* 多选 */
.multiOpt{
  width: 100%;
  margin: 5px 0;
}

/* 判断 */

/* 文件上传 */
/deep/ .fileUpload{
  .el-dialog__body{
    padding: 30px 20px;
  }
}

/* 文件下载 */

/* 高级检索 */
.advanceRetrieval{
  margin: 5px 0 15px 0;
  font-size: 16px;
}

/* 所有下拉菜单统一样式 */
.mySelect{
  width: 100%;
}

/* 穿透修改 UE 的样式 */
/deep/ .ql-container { height: 120px; }
/* 穿透修改elementui的样式 */
/deep/ .el-dialog__body .el-main{
  padding: 0;
}
/deep/ .el-dialog__body{
  padding: 0 20px;
}
/deep/ .el-divider--horizontal{
  margin: 10px 0;
}
/deep/ .el-step__head, .is-finish{
  margin-left: 20px;
}
/deep/ .el-tooltip{
  margin-bottom: 0;
}
/* 除 /deep/写法之外，穿透修改样式的另一种方式 v-deep
  例如  ::deep { *** }
*/
/* style为css时的写法如下
  .a >>> .b { *** }
*/
</style>
